
async function rander () {
  // 获取全部学员信息
  const result = await axios({
    url: '/student/list',
  })
  // console.log(result.data.data)
  // 获取学员姓名数组
  const names = result.data.data.map(value => value.name)
  // 获取学员期望薪资数组
  const salaries = result.data.data.map(value => value.salary)
  // 获取学员真实薪资数组
  const trueSalaries = result.data.data.map(value => value.truesalary)
  // 获取学员籍贯数组
  const hometownList = []
  result.data.data.forEach(value => {
    // 判断籍贯数组里面是否有该籍贯，没有返回一个 -1， 有则返回该籍贯的下标
    const index = hometownList.findIndex(item => item.name === value.province)
    // 没有该籍贯则push 数组进去，有则给value 加1
    if (index === -1) {
      hometownList.push({ value: 1, name: value.province })
    } else {
      hometownList[index].value++
    }
  })
  // 获取每组成绩
  const score = await axios({
    url: '/score/batch',
    params: {
      batch: 1
    }
  })
  const scoreList = score.data.data
  // console.log(scoreList)


  // 班级概况
  fn()
  // 薪资折线图函数
  fn1(names, salaries, trueSalaries)
  // 籍贯的饼图函数
  fn2(hometownList)
  // 每组成绩查询
  fn3(scoreList)
  // 地图
  fn4()

}
rander()

// 薪资折线图函数
function fn1 (names, salaries, trueSalaries) {
  // 获取有宽高的盒子
  const myChart = echarts.init(document.querySelector(".line"))

  // 指定图表的配置项和数据
  const option = {
    // 线的颜色
    color: ["orange", "skyblue"],
    title: {
      text: "薪资折线图",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {},
    // 拖动 类似滚动条
    dataZoom: [
      // {
      //   type: "inside",
      //   start: 0,
      //   end: 10,
      // },
      {
        // 滑块开始的位置
        start: 20,
        // 滑块结束位置
        end: 50,
      },
    ],
    // 工具箱
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: names, // 姓名数组
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}",
      },
    },
    series: [
      {
        name: "期望薪资",
        type: "line",
        data: salaries, // 期望薪资
        // 平滑
        smooth: true,
        // 设置图例 实心圆
        symbol: "circle",
        // color: "red",
      },
      {
        name: "实际薪资",
        type: "line",
        data: trueSalaries, // 真实薪资
        // 平滑
        smooth: true,
        // 设置图例 实心圆
        symbol: "circle",
        // color: "blue",
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
// 籍贯的饼图函数
function fn2 (hometownList) {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".pie"))

  // 指定图表的配置项和数据
  const option = {
    // 标题
    title: {
      text: "籍贯 hometown",
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        // 内外圆半径
        radius: [25, 150],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: hometownList, // 自己处理过的数据
      },
    ],
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
// 班级概况
async function fn () {
  const result = await axios({
    url: '/student/overview',
  })
  // console.log(result.data.data)
  const { avgAge, avgSalary, proportion, total } = result.data.data
  document.querySelector('.total').innerHTML = total
  document.querySelector('.avgSalary').innerHTML = avgSalary
  document.querySelector('.avgAge').innerHTML = avgAge
  document.querySelector('.proportion').innerHTML = proportion
}
// 成绩Score
const toggleBatchBtn = document.querySelector('#toggleBatchBtn')
const batch = document.querySelector('#batch')
toggleBatchBtn.addEventListener('click', function () {
  batch.classList.toggle('dashboard-show')
})
batch.addEventListener('click', async function (e) {
  if (e.target.tagName === 'A') {
    const index = e.target.dataset.index
    const score = await axios({
      url: '/score/batch',
      params: {
        batch: index
      }
    })
    const scoreList = score.data.data
    // 每组成绩查询
    fn3(scoreList)
  }
})
function fn3 (scoreList) {
  var chartDom = document.querySelector('.barChart')
  var myChart = echarts.init(chartDom)
  var option

  const { avgScore, group, gt60, gt80, lt60 } = scoreList

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['平均分', '低于60分人数', '60-80分之间', '高于80分人数']
    },
    grid: {
      top: '10%',
      bottom: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: group,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        yAxisIndex: 0,
        data: avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        yAxisIndex: 1,
        data: lt60
      },
      {
        name: '60-80分之间',
        type: 'bar',
        yAxisIndex: 1,
        data: gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        yAxisIndex: 1,
        data: gt80
      }
    ]
  }

  option && myChart.setOption(option)

}
// 地图
function fn4 () {
  const myChart = echarts.init(document.querySelector(".map"))

  var chinaGeoCoordMap = {
    '黑龙江': [127.9688, 45.368],
    '大庆': [126.9688, 45.868],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京': [116.4551, 40.2539],
    "辽宁": [123.1238, 42.1216],
    "河北": [114.4995, 38.1006],
    "天津": [117.4219, 39.4189],
    "山西": [112.3352, 37.9413],
    "陕西": [109.1162, 34.2004],
    "甘肃": [103.5901, 36.3043],
    "宁夏": [106.3586, 38.1775],
    "青海": [101.4038, 36.8207],
    "新疆": [87.9236, 43.5883],
    "西藏": [91.11, 29.97],
    "四川": [103.9526, 30.7617],
    "重庆": [108.384366, 30.439702],
    "山东": [117.1582, 36.8701],
    "河南": [113.4668, 34.6234],
    "江苏": [118.8062, 31.9208],
    "安徽": [117.29, 32.0581],
    "湖北": [114.3896, 30.6628],
    "浙江": [119.5313, 29.8773],
    "福建": [119.4543, 25.9222],
    "江西": [116.0046, 28.6633],
    "湖南": [113.0823, 28.2568],
    "贵州": [106.6992, 26.7682],
    "云南": [102.9199, 25.4663],
    "广东": [113.12244, 23.009505],
    "广西": [108.479, 23.1152],
    "海南": [110.3893, 19.8516],
    '上海': [121.4648, 31.2891]
  }
  var chinaDatas = [
    [{
      name: '黑龙江',
      value: 0.88
    }],
    [{
      name: '内蒙古',
      value: 0.12
    }],
    [{
      name: '吉林',
      value: 0.89
    }],
    [{
      name: '辽宁',
      value: 0.86
    }],
    [{
      name: '河北',
      value: 0.88
    }],
    [{
      name: '北京',
      value: 0.83
    }],
    [{
      name: '天津',
      value: 0.71
    }],
    [{
      name: '山西',
      value: 0.63
    }],
    [{
      name: '陕西',
      value: 0.56
    }],
    [{
      name: '宁夏',
      value: 0.17
    }],
    [{
      name: '云南',
      value: 0.11
    }],
    [{
      name: '四川',
      value: 1
    }],
    [{
      name: '重庆',
      value: 0.80
    }],
    [{
      name: '山东',
      value: 0.77
    }],
    [{
      name: '河南',
      value: 0.75
    }],
    [{
      name: '江苏',
      value: 0.88
    }],
    [{
      name: '安徽',
      value: 0.73
    }],
    [{
      name: '湖北',
      value: 0.75
    }],
    [{
      name: '浙江',
      value: 0.82
    }],
    [{
      name: '福建',
      value: 0.67
    }],
    [{
      name: '江西',
      value: 0.71
    }],
    [{
      name: '湖南',
      value: 0.75
    }],
    [{
      name: '广东',
      value: 0.78
    }],
    [{
      name: '海南',
      value: 0.1
    }],
    [{
      name: '新疆',
      value: 0
    }],
    [{
      name: '上海',
      value: 0.91
    }]
  ]

  var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i]
      var fromCoord = chinaGeoCoordMap[dataItem[0].name]
      var toCoord = [113.12244, 23.009505]
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }])
      }
    }
    return res
  }
  var series = [];
  [
    ['广东', chinaDatas]
  ].forEach(function (item, i) {
    console.log(item)
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) { //圆环显示文字
            return params.data.name
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5 + val[2] * 5 //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        }
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: "#0f0"
            }
          },
          emphasis: {
            show: true,
            color: "#f60"
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    )
  })

  option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = ""
        var name = params.name
        var value = params.value[params.seriesIndex + 1]
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value
        return res
      }
    },
    backgroundColor: "#013954",
    visualMap: { //图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: true,
      color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: 'rgba(51, 69, 89, .5)', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}